<!--
 描述: 中下
-->

<template>
  <div class="wrap-container sn-container">
    <div class="sn-content">
      <div class="sn-title">乡镇网格情况对比</div>
      <div class="sn-body">
        <div class="wrap-container">
          <div class="chartsdom" id="chart_ptrend"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
    export default {
        name: "pyramidTrend",
        data() {
            return {
                baseUrl: domain.testUrl,
                option: null,
                dataMap: {},
            }
        },
        mounted() {
            this.getEchart();
        },
        methods: {
            getEchart() {

                var url = this.baseUrl + "memberDatav/selectStateByCondition";

                axios.post(url).then((response) => {

                    let myChart = echarts.init(document.getElementById('chart_ptrend'));

                    this.option = {
                        // backgroundColor: '#091C3D',
                        tooltip: { //提示框组件
                            trigger: 'axis',
                            formatter: '{b}<br />{a0}: {c0}<br />{a1}: {c1}',
                            axisPointer: {
                                type: 'shadow',
                                label: {
                                    backgroundColor: '#6a7985'
                                }
                            },
                            textStyle: {
                                color: '#fff',
                                fontStyle: 'normal',
                                fontFamily: '微软雅黑',
                                fontSize: 8,
                            }
                        },
                        grid: {
                            left: '97%',
                            right: '97%',
                            bottom: '0%',
                            top: '0%',
                            //	padding:'0 0 10 0',
                            containLabel: true,
                        },
                        legend: {//图例组件，颜色和名字
                            right: '3%',
                            top: '0%',
                            itemGap: 11,
                            itemWidth: 11,
                            itemHeight: 10,
                            data: [{
                                name: '网格数量',
                                //icon:'image://../wwwroot/js/url2.png', //路径
                            },
                                {
                                    name: '事件数量',
                                }],
                            textStyle: {
                                color: '#a8aab0',
                                fontStyle: 'normal',
                                fontFamily: '微软雅黑',
                                fontSize: 11,
                            }
                        },
                        xAxis: [
                            {
                                type: 'category',
                                //	boundaryGap: true,//坐标轴两边留白
                                data: [
                                    '沾尚镇',
                                    '西寨乡',
                                    '乐平镇',
                                    '大寨镇',
                                    '三都乡',
                                    '赵壁乡',
                                    '冶头镇',
                                    '孔氏乡',
                                    '闫庄乡',
                                    '皋落镇',
                                    '界都乡'
                                ],
                                axisLabel: { //坐标轴刻度标签的相关设置。
                                    //		interval: 0,//设置为 1，表示『隔一个标签显示一个标签』
                                    //	margin:15,
                                    textStyle: {
                                        color: '#078ceb',
                                        fontStyle: 'normal',
                                        fontFamily: '微软雅黑',
                                        fontSize: 10,
                                    },
                                    rotate: 50,
                                },
                                axisTick: {//坐标轴刻度相关设置。
                                    show: false,
                                },
                                axisLine: {//坐标轴轴线相关设置
                                    lineStyle: {
                                        color: '#fff',
                                        opacity: 0.2
                                    }
                                },
                                splitLine: { //坐标轴在 grid 区域中的分隔线。
                                    show: false,
                                }
                            }
                        ],
                        yAxis: [
                            {
                                type: 'value',
                                splitNumber: 5,
                                axisLabel: {
                                    textStyle: {
                                        color: '#a8aab0',
                                        fontStyle: 'normal',
                                        fontFamily: '微软雅黑',
                                        fontSize: 12,
                                    }
                                },
                                axisLine: {
                                    show: false
                                },
                                axisTick: {
                                    show: false
                                },
                                splitLine: {
                                    show: true,
                                    lineStyle: {
                                        color: ['#fff'],
                                        opacity: 0.06
                                    }
                                }

                            }
                        ],
                        series: [
                            {
                                name: '网格数量',
                                type: 'bar',
                                data: response.data[0].zs,
                                barWidth: 10,
                                barGap: 0,//柱间距离
                                // label: {//图形上的文本标签
                                //     normal: {
                                //       show: true,
                                //       position: 'top',
                                //       textStyle: {
                                //           color: '#a8aab0',
                                //           fontStyle: 'normal',
                                //           fontFamily: '微软雅黑',
                                //           fontSize: 12,
                                //       },
                                //     },
                                // },
                                itemStyle: {
                                    normal: {
                                        show: true,
                                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                            offset: 0,
                                            color: '#5768EF'
                                        }, {
                                            offset: 1,
                                            color: '#5768EF'
                                        }]),
                                        barBorderRadius: 50,
                                        borderWidth: 0,
                                    }
                                },
                            },
                            {
                                name: '事件数量',
                                type: 'bar',
                                data: response.data[0].yb,
                                barWidth: 10,
                                barGap: 0,//柱间距离
                                // label: {//图形上的文本标签
                                //     normal: {
                                //       show: true,
                                //       position: 'top',
                                //       textStyle: {
                                //           color: '#a8aab0',
                                //           fontStyle: 'normal',
                                //           fontFamily: '微软雅黑',
                                //           fontSize: 12,
                                //       },
                                //     },
                                // },
                                itemStyle: {
                                    normal: {
                                        show: true,
                                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                            offset: 0,
                                            color: '#69CBF2'
                                        }, {
                                            offset: 1,
                                            color: '#69CBF2'
                                        }]),
                                        barBorderRadius: 50,
                                        borderWidth: 0,
                                    }
                                },
                            }
                        ]
                    }

                    myChart.setOption(this.option, true);

                    window.addEventListener('resize', () => {
                        myChart.resize();
                    });


                }).catch(function (response) {
                    console.log(response); //发生错误时执行的代码
                });

            }
        },
        beforeDestroy() {
        }
    };
</script>

<style lang="scss" scoped>
  .sn-container {
    left: 460px;
    top: 898px;
    width: 999px;
    height: 154px;
    .chartsdom {
      width: 100%;
      height: 100%;
    }
  }
</style>
